<template>
  <div class="fullMain">
    <div class="header">
      <x-header class="custumHeader" :left-options="{backText: '',showBack: false}">
        <a style="color: #D9D9D9;font-size: 17px">群文件</a>
        <a slot="right" style="color: white;font-size: 17px">
          <i class="fa fa-list-ul" @click="isCheckFile()"></i>
          <i class="fa fa-exchange" @click="uploadFile()"></i>
        </a>
      </x-header>
    </div>
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>

    <!-- 点击上传按钮后的弹窗 -->
    <div class="upload_wrapper">
      <div class="trible"></div>
      <ul class="uploadFile">
        <li @click="uploadFile()">
          <i class="fa fa-file-o"></i>
          上传文件
        </li>
        <li @click="uploadFile()">
          <i class="fa fa-picture-o"></i>
          上传照片
        </li>
        <li @click="uploadFile()">
          <i class="fa fa-youtube-play"></i>
          上传视频
        </li>
      </ul>
    </div>

    <ul class="fileList">
      <li v-for="(item,index) in fileList" :key="index" @click="selectFile(index,item.fileId)">
        <i class="fa fa-circle-thin circle"></i>
        <div class="fileTypeImg" :style="{backgroundPosition:fileTypePic(item.fileName)}"></div>
        <div class="fileDetail">
          <span class="fileName">{{item.fileName}}</span>
          <span class="fileOtherInfo">
            {{dateForm(item.uploadTime)}} 来自
            <span class="uploadUser">{{item.userName}}</span>
            &nbsp;
            {{item.fileSize}}
          </span>
        </div>
      </li>
    </ul>
    <!-- 底部的操作框 -->
    <ul class="bottom_bar">
      <li>
        <i class="fa fa-download" @click="downloadFile()"></i>
      </li>
      <li>
        <i class="fa fa-trash" @click="deleteFile()"></i>
      </li>
    </ul>

    <uploadFile :isShowUpload="isShowUpload" @getIsShowUpload="getIsShowUpload" :groupId="groupId"/>
  </div>
</template>

<script>
import { Cell, XHeader, Popover, Checklist } from "vux";
import uploadFile from "./G_groupFile_upload.vue"
import download from "api/download";

export default {
  name: "G_groupFile",
  data() {
    return {
      alertText: '', // 验证提示框的文本
      isShowAlert: false, // 是否显示验证提示,
      fileList: [],
      checklist: [],
      isShowUpload:false,
      selectedList:[],
      groupId:this.$route.params.groupId
    };
  },
  components: {
    Cell,
    XHeader,
    Popover,
    uploadFile
  },
  mounted() {
    this.getGroupFileList();
  },
  watch:{
    isShowUpload(val){
      this.getGroupFileList();
    }
  },
  methods: {
    showAlert (alertText) {
      this.isShowAlert = true
      this.alertText = alertText
    },
    closeTip () {
      this.isShowAlert = false
      this.alertText = ''
    },
    async getGroupFileList() {
      const result = await download.getGroupFileByGroupId(this.groupId);
      this.fileList.length = 0;
      this.fileList = result.data;
    },
    // 日期的格式
    dateForm(date) {
      let result;
      let year = date.substring(0, 4);
      let month = date.substring(5, 7);
      let day = date.substring(8, 10);
      let now = new Date();
      let nowYear = now.getFullYear();
      if (year == nowYear) {
        result = month + "-" + day;
      } else {
        result = year + "-" + month + "-" + day;
      }
      return result;
    },
    //上传文件
    uploadFile() {
      let upload_wrapper = document.getElementsByClassName("upload_wrapper");
      if (upload_wrapper[0].style.display === "none") {
        upload_wrapper[0].style.display = "block";
      } else {
        upload_wrapper[0].style.display = "none";
      }
    },
    // 切换选择模式
    isCheckFile() {
      let circle = document.getElementsByClassName("circle");
      let bottom_bar = document.getElementsByClassName("bottom_bar");
      if (circle[0].style.display === "none") {
        bottom_bar[0].style.display = "flex";
        for (let i = 0; i < circle.length; ++i) {
          circle[i].style.display = "block";
        }
      } else {
        bottom_bar[0].style.display = "none";
        for (let i = 0; i < circle.length; ++i) {
          circle[i].style.display = "none";
          // 清空之前的所有选项
          circle[i].setAttribute("class", "fa fa-circle-thin circle");
          this.selectedList.length = 0
        }
      }
    },
    // 选择文件
    selectFile(index,fileId) {
      let circle = document.getElementsByClassName("circle");
      if (circle[index].style.display === "block") {
        if (circle[index].classList.contains("fa-circle-thin")) {
          circle[index].setAttribute("class", "fa fa-check-circle circle");
          this.selectedList.push(fileId)
        } else {
          circle[index].setAttribute("class", "fa fa-circle-thin circle");
          let indexOfFile = this.selectedList.indexOf(fileId)
          if(indexOfFile != -1){
            this.selectedList.splice(indexOfFile,1)
          }
        }
      }
    },
    downloadFile() {
      alert("开发中......");
    },
    async deleteFile() {
      for(let item of this.selectedList){
        const result =  await download.deleteGroupFile(item)
        if(result.code === 0){
          this.showAlert("删除失败")
        }
      }
      this.getGroupFileList();
    },
    fileType(fileName) {
      let i = fileName.lastIndexOf(".");
      let type;
      if (i > -1) {
        type = fileName.substring(i+1);
      }
      return type.toLowerCase();
    },
    fileTypePic(fileName) {
      let move;
      let filetype = this.fileType(fileName)
      switch (filetype) {
        case "avi":
          move = "0 0";
          break;
        case "jpg":
          move = "-65px 0";
          break;
        case "txt":
          move = "-127px 0";
          break;
        case "mp3":
          move = "-190px 0";
          break;
        case "pdf":
          move = "-253px 0";
          break;

        case "xls":
          move = "0 -81px";
          break;
        case "png":
          move = "-64px -81px";
          break;
        case "mov":
          move = "-127px -81px";
          break;
        case "wav":
          move = "-190px -81px";
          break;
        case "doc":
          move = "-253px -81px";
          break;
        case "docx":
          move = "-253px -81px";
          break;
        case "eps":
          move = "0 -162px";
          break;
        case "ppt":
          move = "-65px -162px";
          break;
        case "zip":
          move = "-127px -162px";
          break;
        case "css":
          move = "-190px -162px";
          break;
        case "rar":
          move = "-253px -162px";
          break;

        case "html":
          move = "0 -243px";
          break;
        case "eml":
          move = "-65px -243px";
          break;
        case "raw":
          move = "-127px -243px";
          break;
        case "csv":
          move = "-190px -243px";
          break;
        case "ttf":
          move = "-253px -243px";
          break;
        default:
          move = "0 0";
          break;
      }
      return move
    },
    uploadFile(){
      this.isShowUpload = true
    },
    getIsShowUpload(data){
      this.isShowUpload = data
    }
  }
};
</script>
<style>
/* 头部 */
.header {
  position: relative;
  width: 100%;
  z-index: 99;
}
.header i {
  color: #d9d9d9;
}
.header i:first-child {
  margin-right: 15px;
}
/* 点击上传按钮的下拉框 */
.trible {
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: white;
  right: 15px;
  top: 50px;
  z-index: 999;
  transform: rotateZ(-45deg);
}
.uploadFile {
  list-style: none;
  position: absolute;
  right: 0px;
  top: 42px;
  z-index: 999;
  padding: 0px 80px 0 10px;
  line-height: 40px;
  background-color: white;
}
.uploadFile i {
  color: gray;
  margin-right: 10px;
}
/* 文件列表 */
.fileList {
  text-decoration: none;
  list-style: none;
  line-height: 40px;
  font-size: 12px;
  margin: 0;
  padding: 0;
  height: calc(100% - 80px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  z-index: 999;
}
.fileList > li {
  border-bottom: 1px #c1c1c1 solid;
  font-size: 16px;
  display: flex;
}
.fileList .fileTypeImg {
  display: inline-block;
  height: 80px;
  width: 49px;
  overflow: hidden;
  margin: 10px 20px 0 15px;
  background-image: url("~static/img/download/fileType.gif");
  background-size: 300px;
  background-repeat: no-repeat;
  background-color: rgb(237, 237, 237);
}
.fileList .fileDetail {
  display: flex;
  flex-direction: column;
}
.fileList .fileDetail span {
  color: #c1c1c1;
}
.fileList .fileDetail .uploadUser {
  color: #462fd8;
}

.fileList .fileDetail .fileName {
  color: black;
  line-height: 35px;
}
.upload_wrapper {
  display: none;
}

/* 列表左侧的圈圈 */
.fileList .circle {
  color: #c1c1c1;
  margin-left: 10px;
  font-size: 25px;
  line-height: 80px;
  display: none;
}

/* 底部的框框 */
.bottom_bar {
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
  font-size: 20px;
  list-style: none;
  z-index: 999;
  display: flex;
  justify-content: space-around;
  display: none;
}
.bottom_bar li i {
  font-size: 30px;
  color: gray;
}
</style>
